<template>
<div class="main">
    <!--左边绿色图片开始-->
    <div class="left">
        <h2>视创</h2>
        <h3>记录产品 分享设计</h3>
        <img src="../../assets/login/people.png" alt="">
    </div>
    <!--左边绿色图片结束-->
    <!--登录-->
    <div class="login" v-show="loginOrRegister==true&&ifForgetPwd==false">
    <!--右边表单开始文本-->
    <div class="right"  v-show="scan==false">
        <h3 class="pwd"><a @click="cur=true" :class="{active:cur==true}">密码登录</a></h3>
        <h3 class="code"><a @click="cur=false" :class="{active:cur==false}">验证码登录</a></h3>
        <div class="form">
            <div class="pwdFrom" >
                <!--密码登录-->
                <el-form  v-show="cur==1" :rules="pwdForm" ref="pwdFormRef">
                    <el-form-item prop="aemail" class="firstInput">
                        <el-input v-model="pwdForm.aemail" placeholder="手机号/邮箱" clearable="clearable" @blur="isPhone();email_blur()"></el-input>
                    </el-form-item>
                    <el-form-item prop="apassword">
                        <el-input v-model="pwdForm.apassword" placeholder="密码" :type="passwordType"></el-input>
                        <img class="icon" :src="passwordType === 'password' ? useenImg : seenImg" @click="changeType()"/>
                    </el-form-item>
                    <h6>广告商只可用邮箱登录</h6>
                </el-form>
                <!--验证码登录-->
                <el-form  v-show="cur==0">
                    <el-form-item prop="phoneNumer" class="firstInput">
                        <el-input v-model="codeForm.phoneNumer" placeholder="手机号" clearable="clearable" ></el-input>
                    </el-form-item>
                    <el-form-item prop="codePwd">
                        <el-input v-model="codeForm.codePwd" placeholder="验证码"></el-input>
                        <button @click="getCode()" class="getCode">获取验证码</button>
                    </el-form-item>
                </el-form>
                <!--其他登录方式-->
                <a  class="forgetPassword" @click="getForgetPwd()">忘记密码</a>
                <a  class="otherLoginWay">其他登录方式</a>
                <div class="fourPlate">
                    <ul>
                        <li class="firstLi" @click="getScan('YouTuBe')"><img src="../../assets/producer_space/youtube_logo.svg" alt="" ><a class="YouTuBe">YouTuBe</a></li>
                        <li @click="getScan('bilibili')"><img src="../../assets/producer_space/bold_logo.svg" alt=""><a class="YouTuBe">bilibili</a></li>
                        <li @click="getScan('抖音')"><img src="../../assets/producer_space/tiktok_logo.svg" alt=""><a class="YouTuBe">抖音</a></li>
                        <li @click="getScan('西瓜视频')"><img src="../../assets/producer_space/xigua_logo.svg" alt=""><a class="YouTuBe">西瓜视频</a></li>
                    </ul>
                </div>
                <button @click="submit()">登录</button>
                
            </div>
        </div>
    </div>
    <!--右边表单文本结束-->
    <!--右边表单扫码开始-->
    <div class="rightScan" v-show="scan==true">
        <div class="TV" ><img src="../../assets/login/TV.svg" alt="" ></div>
        <div class="tangel" @click="getScan('YouTuBe')" @mouseenter="mouseIN" @mouseleave="mouseOut"></div>
        <div class="pwdLogin" v-show="codeLogin==true">
            密码登录
            <div class="retangle"></div>
        </div>
        <div class="scan">
            <h6>{{plate}} 登录</h6>
            <img src="../../assets/login/toScan.png" alt="">
            <span>使用 {{plate}} 扫描二维码登录“视创”</span>
        </div>
        
    </div>
    <!--右边表单扫码结束-->
    <div class="rigester">没有账号？<span @click="getRegister()">立即注册</span></div>
    </div>
    <!--注册-->
    <div class="toRegister" v-show="loginOrRegister==false">
        <div class="toLogin">已有账号？<span @click="getLogin()">马上登陆</span></div>
        <div class="reTitle">
            <a>免费注册</a>
            <div class="chooseRole">
                <el-radio v-model="radio" label="1" @click.native="getPosition()">广告商</el-radio>
                <el-radio v-model="radio" label="2" @click.native="getPosition()">视频创作者</el-radio>
            </div>
            <div class="inputRegitser">
                <el-form>
                    <el-form-item prop="email">
                        <el-input v-model="registerForm.email" :placeholder="kingForm.kingItem" clearable="clearable"></el-input>
                    </el-form-item>
                    <el-form-item prop="registerCode">
                        <el-input v-model="registerForm.registerCode" placeholder="验证码"></el-input>
                        <button @click="getCode()" class="getCode">获取验证码</button>
                    </el-form-item>
                    <el-form-item prop="registerPwd">
                        <el-input v-model="registerForm.registerPwd" placeholder="密码" :type="passwordType"></el-input>
                        <img class="icon" :src="passwordType === 'password' ? useenImg : seenImg" @click="changeType()"/>
                    </el-form-item>
                    <el-form-item prop="nickName">
                        <el-input v-model="registerForm.nickName" placeholder="昵称" clearable="clearable"></el-input>
                    </el-form-item>
                    <el-form-item prop="registerPhone">
                        <el-input v-model="registerForm.registerPhone" :placeholder="kingForm.noKingItem" clearable="clearable"></el-input>
                    </el-form-item>
                </el-form>
                <button @click="registerButton()">注册账号</button>
                <div class="agree">
                    <el-checkbox v-model="checked"></el-checkbox>
                    我已阅读并同意<span>《服务协议》《隐私协议》</span>
                </div>
                <span class="checkBeforeLogin" v-show="showCheckBeforeLogin==true">请勾选后再注册账号</span>
            </div>
        </div>
    </div>
    <!--忘记密码-->
    <div class="forgetPwd" v-show="ifForgetPwd==true">
        <h3>忘记密码</h3>
        <div class="inputForgetPwd" v-show="ifForgetPwd==true&&ifChangePwdSucess==false">
            <el-form :rules="forgetPwdFromRules" :model="forgetPwdFrom">
                <el-form-item prop="forgetPhone">
                        <el-input v-model="forgetPwdFrom.forgetPhone" placeholder="手机号" clearable="clearable"></el-input>
                </el-form-item>
                <el-form-item prop="forgetCode">
                        <el-input v-model="forgetPwdFrom.forgetCode" placeholder="验证码"></el-input>
                        <button @click="getCode()" class="getCode">获取验证码</button>
                </el-form-item>
                <el-form-item prop="forgetPwd">
                        <el-input v-model="forgetPwdFrom.forgetPwd" placeholder="设置密码：6-16位字符，包含字母和数字" :type="passwordType"></el-input>
                        <img class="icon" :src="passwordType === 'password' ? useenImg : seenImg" @click="changeType()"/>
                </el-form-item>
                <el-form-item prop="comfirmyForgetPwd">
                        <el-input v-model="forgetPwdFrom.comfirmyForgetPwd" placeholder="设置密码：6-16位字符，包含字母和数字" :type="passwordType"></el-input>
                        <img class="icon" :src="passwordType === 'password' ? useenImg : seenImg" @click="changeType()"/>
                </el-form-item>
            </el-form>
            <button @click="getForgetPwdSucess()" class="comfirm">确认</button>
            <a class="backToLogin" @click="backToLoginFuc()">返回登录</a>
        </div>
        <!--忘记密码成功-->
        <div class="forgetPwdSucess" v-show="ifForgetPwd==true&&ifChangePwdSucess==true">
            <img src="../../assets/login/correct.svg" alt="">
            <a class="backToLogin" @click="backToLoginFuc()">返回登录</a>
        </div>
    </div>
    
</div>
</template>

<script>
export default {
    data(){
        return {
            loginType:1,//1代表创作者，0代表广告商
            cur:true,
            scan:false,
            pwdForm:{
                aemail:"",
                apassword:""
            },//密码登录表单
            codeForm:{
                phoneNumer:"",
                codePwd:""
            },//验证码登录表单
            passwordType:"password",
            seenImg: require("../../assets/pics/openEyes.svg"),
            useenImg:require("../../assets/pics/closedEyes.svg"),
            plate:"",
            pwdform:"",
            codeform:"",
            loginOrRegister:true,
            radio: '1',
            registerForm:{
                registerPhone:"",
                registerCode:"",
                registerPwd:"",
                nickName:"",
                email:"",
                kind:"",
                
            },//注册表单
            kingForm:{
                kingItem:"邮箱",
                noKingItem:"手机号"
            },
            codeLogin:false,//显示密码登录
            checked:false,
            showCheckBeforeLogin:false,
            ifForgetPwd:false,
            forgetPwdFromRules:{
                forgetPhone: 
                [
                    {required: true, message: "手机号不能为空", trigger: "blur"}
                ],
                forgetCode:
                 [
                    {required: true, message: "验证码不能为空", trigger: "blur"}
                ],
                forgetPwd: 
                [
                    {required: true, message: "新密码不能为空", trigger: "blur"}
                ],
                comfirmyForgetPwd:
                [
                    {required: true, message: "确认密码不能为空", trigger: "blur"}
                 ]
            },
              
            forgetPwdFrom:{
                forgetPhone:"",
                forgetCode:"",
                forgetPwd:"",
                comfirmyForgetPwd:"",
            },
            ifChangePwdSucess:false
        }
    },
    methods:{
        changeType(){
            if(this.passwordType=="password"){
                this.passwordType="text"
            }else{
                this.passwordType="password"
            }
        },
        //电话判断
        isPhone(){
               var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
                if(this.pwdForm.aemail.length ==11){
                    if(!reg.test(this.pwdForm.aemail)){
                        console.log("电话号码输入不符合格式")
                    }else {
                        console.log('电话号码输入正确！');
                        return 1;
                    }
                }
                else{
                     console.log("电话号码输入小于11位")
                }
                // console.log(reg)
            },
        //邮箱判断
        email_blur() {
                var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
                if (!verify.test(this.pwdForm.aemail)) {
                    console.log('邮箱格式错误, 请重新输入')
                } else {
                    console.log("邮箱正确！")
                    return 1;

                }
            },
        submit(){
            console.log("提交")
            var params={
            };
            console.log(typeof(JSON.stringify(params)));
            var url1
            if (this.isPhone()){
                url1='http://1.117.65.58:9001/creater/login'
                params={
                    cphone:this.pwdForm.aemail,
                    cpassword:this.pwdForm.apassword
                };
                this.loginType=1
            }
            else if(this.email_blur()){
                url1='http://1.117.65.58:9001/advertiser/login'
                params={
                    aemail:this.pwdForm.aemail,
                    apassword:this.pwdForm.apassword
                };
                this.loginType=0;
            }
            //登录接口
            this.$axios({
               method:'post',
               url:url1,
               params:params,
            }).then(response=>{
            console.log(response);
            const arr =response.data.data;
            console.log(arr);
            window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
            window.sessionStorage.setItem('aid',JSON.stringify(arr.aid));
            if( this.loginType==1)
            {
                window.sessionStorage.setItem('cid',JSON.stringify(response.data.data.cid));
            }
            if(response.data.m2==="登录成功!")
            {
                if(this.loginType==0){
                    this.$router.push({path:'/'});
                }
                else{
                     this.$router.push({path:'/'});
                }
                
            }
            else
                alert(response.data.m2)
           }).catch(function(err){
               console.log(err)
           })
           //登录接口结束
        },
        getCode(){
            console.log("获得验证码")
        },
        getScan(name){
            if(this.scan==false){
                console.log(this.scan)
                this.scan=true
                this.plate=name
            }else if(this.scan==true){
                console.log(this.scan)
                this.scan=false
            }
            console.log(this.scan)
        },
        getRegister(){
            this.loginOrRegister=false
        },
        getLogin(){
            this.loginOrRegister=true
        },
        mouseIN(){
            this.codeLogin=true
        },
        mouseOut(){
            this.codeLogin=false
        },
        getPosition(){
            if(this.radio=='1'){
                return '邮箱'
            }else{
                return '手机号'
            }
        },
        getPosition(){
            if(this.radio=='2'){
                this.kingForm.kingItem="邮箱"
                this.kingForm.noKingItem="手机号"
            }else{
                this.kingForm.kingItem="手机号"
                this.kingForm.noKingItem="邮箱"
            }
        },
        registerButton(){
            // console.log(this.radio);
            if(this.checked==false){
                this.showCheckBeforeLogin=true
                return;
            }else{
                this.showCheckBeforeLogin=false
                console.log("注册成功")
            }
            //注册接口开始
            console.log("注册");
            console.log(this.radio);
             var registerparams ={
                    aname:this.registerForm.nickName,
                    aemail:this.registerForm.email,
                    aphone:this.registerForm.registerPhone,
                    asumtransactions:this.registerForm.registerCode,
                    apassword:this.registerForm.registerPwd,
             };
             var cregisterparams ={
                    cname:this.registerForm.nickName,
                    cphone:this.registerForm.registerPhone,
                    cemail:this.registerForm.email,
                    // asumtransactions:this.registerForm.registerCode,
                    cpassword:this.registerForm.registerPwd,
             };
             var url1=null;
             var params1=null;
             if (this.radio==1){
                url1='http://1.117.65.58:9001/advertiser/register';
                params1=registerparams;
            }
            else{
                url1='http://1.117.65.58:9001/creater/register';
                params1=cregisterparams;
            }
             this.$axios({
               method:'post',
               url:url1,
               data:params1,
            }).then(response=>{
            console.log(response.data)
            if(response.data.m2==="注册成功！" && this.checked==true)
            {
                console.log("注册成功");
                alert("注册成功");
                this.getLogin();
            }
           }).catch(function(err){
               console.log(err)
           })
           //注册接口结束
        },
        getForgetPwd(){
            this.ifForgetPwd=true
        },
        getForgetPwdSucess(){
            // this.ifChangePwdSucess=true
            //忘记密码接口开始
            if(this.forgetPwdFrom.forgetPwd!=this.forgetPwdFrom.comfirmyForgetPwd)
            {
                alert("两次密码不一致");
                return;
            }
             var params={
                aemail:this.forgetPwdFrom.forgetPhone,
                apassword:this.forgetPwdFrom.forgetPwd,
            };
            console.log(typeof(JSON.stringify(params)))
            this.$axios({
               method:'post',
               url:'http://1.117.65.58:9001/advertiser/edit',
               params:params,
            }).then(response=>{
            console.log(response);
            const arr =response.data.data;
            console.log(arr);
            // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
            if(response.data.m2=="修改密码成功")
            {
                console.log("修改密码成功")
                alert("修改密码成功")
                this.backToLoginFuc();
            }
            else
                alert(response.data.m2)
           }).catch(function(err){
               console.log(err)
           })
           //忘记密码接口结束
        },
        backToLoginFuc(){
            this.loginOrRegister=true
            this.ifForgetPwd=false
            this.ifChangePwdSucess=false
        }
    },

}
</script>

<style  scoped>
@import "../../style/login.css";
</style>